import React from 'react';
import { Descriptions, Tag, Space, Typography } from 'antd';
import { NumberOutlined } from '@ant-design/icons';
import { ExperimentDataScalar } from '../../types';
import { parseScalarValue } from '../../utils/formatUtils';

const { Title, Text } = Typography;

interface ScalarDataSectionProps {
  scalarData: ExperimentDataScalar[];
}

const ScalarDataSection: React.FC<ScalarDataSectionProps> = ({ scalarData }) => {
  if (!scalarData || scalarData.length === 0) {
    return null;
  }

  return (
    <div>
      <Title 
        level={5} 
        style={{ 
          marginTop: 0, 
          marginBottom: 16, 
          fontWeight: 500,
          fontSize: '15px',
          color: '#595959'
        }}
      >
        <NumberOutlined style={{ marginRight: 8 }} /> 
        单值数据
      </Title>
      <Descriptions bordered column={2} size="small" style={{ marginBottom: 16 }}>
        {scalarData.map((scalar) => (
          <Descriptions.Item
            key={scalar.id}
            label={
              <Space>
                <span>{scalar.name}</span>
                {scalar.unit && <Tag>{scalar.unit}</Tag>}
                {scalar.data_group && (
                  <Tag color="purple">{scalar.data_group}</Tag>
                )}
              </Space>
            }
            span={1}
          >
            <Text code style={{ whiteSpace: 'pre-wrap' }}>
              {parseScalarValue(scalar.value)}
            </Text>
            {scalar.description && (
              <div style={{ marginTop: 4, fontSize: '12px', color: '#999' }}>
                {scalar.description}
              </div>
            )}
          </Descriptions.Item>
        ))}
      </Descriptions>
    </div>
  );
};

export default ScalarDataSection;

